<template>
    <el-dialog v-model="drawer" title="商品评价" width="780px" :append-to-body="true" @close="close" destroy-on-close center>
        <el-card class="box-card" v-for="(item, index) in skuList" style="margin-bottom: 20px;">
            <div class="sku-box" >
                <el-image style="width: 120px; height: 120px" :src="item.skuDefaultImg" fit="cover" :preview-src-list="[item.skuDefaultImg]" :preview-teleported="true" >
                    <template #error>
                        <div class="image-slot">
                            <el-icon><ele-Picture /></el-icon>
                        </div>
                    </template>
                </el-image>
                <div class="product-info">
                    <div style="font-size: 16px; font-weight: bold;">{{ item.skuTitle }}</div>
                    <div style="color: gray; margin-top: 5px;">规格：{{ item.skuName }}</div>
                    <div style="color: gray; margin-top: 5px;">单价：<span style="color: red; font-weight: bold;">￥{{ item.price }}</span></div>
                    <div style="color: gray; margin-top: 5px;">数量：{{ countSkuNum(item.skuId) }}</div>
                    <div style="color: gray; margin-top: 5px;">支付价格：<span style="color: red; font-weight: bold;">￥{{ countSkuNum(item.skuId) * item.price }}</span></div>
                </div>
                <div class="star-box">
                    <div style="display: flex; align-content: center;">
                        <span style="margin-right: 5px;">商品评分：</span>
                        <el-rate :disabled="item.isComment == 1" v-model="params[index].star" :colors="colors" />
                    </div>
                    <div style="display: flex; align-content: center;">
                        <span style="margin-right: 5px;">商家服务：</span>
                        <el-rate :disabled="item.isComment == 1" v-model="params[index].serviceStar" :colors="colors" />
                    </div>
                    <div style="display: flex; align-content: center;">
                        <span style="margin-right: 5px;">配送速度：</span>
                        <el-rate :disabled="item.isComment == 1" v-model="params[index].deliverStar" :colors="colors" />
                    </div>
                    <div style="display: flex; align-content: center;">
                        <span style="margin-right: 5px;">配送服务：</span>
                        <el-rate :disabled="item.isComment == 1" v-model="params[index].deliverServiceStar" :colors="colors" />
                    </div>
                    <div style="display: flex; align-content: center;">
                        <span style="margin-right: 5px;">快递包装：</span>
                        <el-rate :disabled="item.isComment == 1" v-model="params[index].packagingStar" :colors="colors" />
                    </div>
                </div>
            </div>
            <el-divider style="margin: 0;" />
            <div class="input-box">
                <div style="margin-right: 20px;">
                    <div style="height: 40px; display: flex; align-items: center;">商品评价：</div>
                    <el-input :disabled="item.isComment == 1" class="sku-comment-input" v-model="params[index].content" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入商品评价" />
                </div>
                <div v-if="item.isComment == 0">
                    <el-radio-group v-model="params[index].uploadType">
                        <el-radio :label="0">图片</el-radio>
                        <el-radio :label="1">视频</el-radio>
                    </el-radio-group>
                    <el-upload v-show="params[index].uploadType == 0" v-model:file-list="params[index].images" :ref="el => uploadBanner[index] = el" :action="uploadUrl" :headers="headers"
                        list-type="picture-card" :auto-upload="true" :multiple="true" accept="image/*"
                        :on-success="imagesOnSuccess">
                        <el-icon>
                            <ele-Camera />
                        </el-icon>
                        <template #file="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="图片" />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)">
                                    <el-icon>
                                        <ele-ZoomIn />
                                    </el-icon>
                                </span>
                                <span class="el-upload-list__item-delete" @click="handleRemove(file, index, 0)">
                                    <el-icon>
                                        <ele-Delete />
                                    </el-icon>
                                </span>
                            </span>
                        </template>
                    </el-upload>
                    <el-upload v-show="params[index].uploadType == 1" v-model:file-list="params[index].videos" :ref="el => uploadVideoBanner[index] = el" :action="uploadUrl" :headers="headers"
                        list-type="picture-card" :auto-upload="true" :multiple="false" :limit="1"
                        accept="video/*" :on-change="handleChange">
                        <el-icon>
                            <ele-VideoCamera />
                        </el-icon>
                        <template #file="{ file }">
                            <video class="el-upload-list__item-thumbnail" :src="file.url"></video>
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview"
                                    @click="handlePictureVideoPreview(file)">
                                    <el-icon>
                                        <ele-ZoomIn />
                                    </el-icon>
                                </span>
                                <span class="el-upload-list__item-delete" @click="handleRemove(file, index, 1)">
                                    <el-icon>
                                        <ele-Delete />
                                    </el-icon>
                                </span>
                            </span>
                        </template>
                    </el-upload>
                </div>
                <div v-if="item.isComment == 1" style="display: flex; flex-wrap: wrap;">
                    <div v-for="(val, index) in sourceSplit(index, 0)">   
                        <video class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px;" :src="val" @click="showCommentSource(val, 0)"></video>
                    </div>
                    <div v-for="(val, index) in sourceSplit(index, 1)">
                        <img class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px;" :src="val" alt="图片" @click="showCommentSource(val, 1)" />
                    </div>
                </div>
            </div>
            <div v-if="item.isComment == 0">
                <el-button type="primary" :disabled="params[index].content == ''" @click="submitComment(index)">提交评价</el-button>
            </div>
        </el-card>
        <el-dialog v-model="dialogBannerVisible" title="图片预览">
			<img w-full :src="dialogImageUrl" alt="图片预览" style="display:block;margin: 0 auto;width:100%" />
		</el-dialog>
		<el-dialog v-model="dialogVideoVisible" title="视频预览">
			<video alt="视频预览" style="display:block;margin: 0 auto;height:300px;width:100%;background: #000;" controls>
				<source :src="dialogVideoUrl" type="video/mp4" />
			</video>
		</el-dialog>
    </el-dialog>
</template>

<script>
import {computed, reactive, toRefs, watch, onMounted, ref} from 'vue'
import {Edit, Check, Plus, Delete} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { Session } from '/@/utils/storage'

import api from '/@/api/commonApi'

export default {
    name: 'CommentCreate',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        form: {
            type: Object,
            default(){
                return {}
            }
        },
        mayList: {
            type: Array,
            default(){
                return []
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context){
        const { dialogDrawer, form, mayList } = toRefs(props)
        const uploadBanner = ref([])
        const uploadVideoBanner = ref([])
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const skuList = computed({
            get: () => {
                mayList.value.forEach(item => {
                    state.params.push({
                        content: item.isComment == 1? item.spuComment[0].content:'',
                        orderId: form.value.marketOrderId,
                        skuId: item.skuId,
                        spuId: item.spuId,
                        spuName: item.skuName,
                        star: item.isComment == 1? item.spuComment[0].star:0,
                        serviceStar: item.isComment == 1? item.spuComment[0].serviceStar:0,
                        deliverStar: item.isComment == 1? item.spuComment[0].deliverStar:0,
                        deliverServiceStar: item.isComment == 1? item.spuComment[0].deliverServiceStar:0,
                        packagingStar: item.isComment == 1? item.spuComment[0].packagingStar:0,
                        spuAttributes: JSON.stringify(item.saleAttrValues),
                        resources: item.isComment == 1? item.spuComment[0].resources:'',
                        commentType: 0,
                        uploadType: 0,
                        images: [],
                        videos: [],
                    })
                })
                return mayList.value
            },
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            params: [],
            dialogImageUrl: '',
            dialogBannerVisible: false,
            dialogVideoUrl: '',
            dialogVideoVisible: false,
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const countSkuNum = (skuId) => {
            let product = form.value.productItems.find(item => item.productId == skuId)

            return product.num
        }
        const imagesOnSuccess = (response, uploadFiles, index) => {

        }
        const handlePictureCardPreview = (file) => {
            state.dialogImageUrl = file.url
            state.dialogBannerVisible = true
        }
        const handleRemove = (file, index, type) => {
            if (type == 0) {
                uploadBanner.value[index].handleRemove(file)
            }else {
                uploadVideoBanner.value[index].handleRemove(file)
            }
        }
        const handlePictureVideoPreview = file => {
            state.dialogVideoUrl = file.url
            state.dialogVideoVisible = true
        }
        const handleChange = file => {
            console.log(file)
        }
        const submitComment = (index) => {
            let fileList = []
            if(state.params[index].videos.length > 0) {
                state.params[index].videos.forEach(item => {
                    fileList.push(item.response.data.src)
                })
            }
            if(state.params[index].images.length > 0) {
                state.params[index].images.forEach(item => {
                    fileList.push(item.response.data.src)
                })
            }
            state.params[index].resources = fileList.join(",")
            
            ElMessageBox.confirm(
                `确认发起此商品的评价？`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    dangerouslyUseHTMLString: true,
                }
            ).then(() => {
                api.submitCommentInfo(state.params[index]).then(res => {
                    skuList.value[index].spuComment[0] = res.data
                    skuList.value[index].isComment = 1
                    ElMessage.success("评论成功")
                })
            })
        }
        const sourceSplit = (index, type) => {
            let result = []
            let imgList = state.params[index].resources.split(",")
            imgList.forEach(item => {
                let lenType = item.split(".")
                if(type == 0 && lenType[lenType.length - 1] == 'mp4') {
                    result.push(item)
                }else if(type == 1 && lenType[lenType.length - 1] != 'mp4') {
                    result.push(item)
                }
            })
            
            return result
        }
        const showCommentSource = (url, type) => {
            if (type == 0) {
                state.dialogVideoUrl = url
                state.dialogVideoVisible = true
            }else{
                state.dialogImageUrl = url
                state.dialogBannerVisible = true
            }
        }

        return { 
            ...toRefs(state),
            drawer,
            close,
            skuList,
            sourceSplit,
            countSkuNum,
            handleChange,
            handleRemove,
            imagesOnSuccess,
            uploadBanner,
            submitComment,
            showCommentSource,
            uploadVideoBanner,
            handlePictureCardPreview,
            handlePictureVideoPreview,
        }
    }
}

</script>

<style lang="scss" scoped>
.sku-box {
    width: auto;
    min-height: 150px;
    display: flex;

    .product-info {
        flex-grow: 10;
        margin-left: 20px;
    }

    .star-box {
        padding-left: 30px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        :deep(.el-rate--large) {
            height: 25px;
        }
    }

}

.input-box{
    display: flex;
    // justify-content: space-around;     
    
    .sku-comment-input {
        width: 300px;
    }
}

</style>